<template>
  <view 
    class="nav-bar"
    :style="{
	   height: navHeight + 'rpx',
	   paddingTop: statusBarHeight + 'rpx',
       backgroundColor: bgColor
    }"
  >
    <view class="nav-content">
      <!-- 返回按钮，根据showBack属性显示 -->
      <view v-if="showBack" class="back-btn" @click="onBack">
        <!-- <text class="back-icon"><</text> -->
		<image class="back-icon" src="/static/images/nav_arrow_icon.png"></image>
      </view>
      
      <view :class="['title-container', showBack ? 'has-back' : '']"
	   :style="{
	            alignItems: showBack ? 'center' : 'flex-start',
	            justifyContent: showBack ? 'center' : 'flex-start'
	          }"
	  >
        <text class="title">{{ title }}</text>
        <text v-if="subtitle" class="subtitle">{{ subtitle }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomNavBar',
  
  props: {
    // 标题
    title: {
      type: String,
      required: true
    },
    // 副标题
    subtitle: {
      type: String,
      default: ''
    },
    // 是否显示返回按钮
    showBack: {
      type: Boolean,
      default: false
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: '#3872FE'
    }
  },
  
  data() {
    return {
      statusBarHeight: 0,
      navHeight: 0
    }
  },
  
  created() {
    // 获取系统信息
    const sysInfo = uni.getSystemInfoSync()
    this.statusBarHeight = sysInfo.statusBarHeight+40
    this.navHeight = this.statusBarHeight + 40 // 状态栏 + 导航内容高度
  },
  
  methods: {
    onBack() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: linear-gradient(135deg, #4B79FF, #3872FE);
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  
  .nav-content {
    position: relative;
    display: flex;
    align-items: center;
	padding: 20rpx 30rpx 40rpx;
    height: 88rpx;
    // padding: 0 30rpx;
    
    .back-btn {
      position: absolute;
      left: 30rpx;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      
      .back-icon {
		width: 48rpx;
		height: 48rpx;
      }
    }
    
    .title-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      // align-items: left;
      // justify-content: left;
      
      &.has-back {
        padding-left: 60rpx; // 为返回按钮留出空间
      }
      
      .title {
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
		display: block;
		margin-bottom: 16rpx;   
		background-color: transparent;   
      }
      
      .subtitle {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}
</style>